import React, { Component } from 'react';
import { Carousel, Tabs, Input } from 'antd';

import './style.less';
import bg1 from '../../img/2.png'
import bg2 from '../../img/4.png'
import bg3 from '../../img/5.png'

const TabPane = Tabs.TabPane;
const Search = Input.Search;

export default class Home extends Component {
    state = {
        screenHeight: 0,
    }

    componentWillMount() {
        this.setState({
            screenHeight: document.documentElement.clientHeight - 60,
        }, () => {
            window.onresize = () => {
                this.setState({
                    screenHeight: document.documentElement.clientHeight - 60,
                });
            };
        });
    }

    onTabsChange = (key) => {
        console.log(key, 'tabsKey');
    }

    render() {
        const { screenHeight } = this.state;
        return (
            <div className="home">
                <div style={{minHeight: `${screenHeight}px`}}>
                    <Carousel autoplay effect="fade">
                        <div style={{backgroundColor: '#a5c6c7', minHeight: `${screenHeight}px`, background: `url(${bg1}) no-repeat 0 0`, backgroundSize: '100% auto'}} />
                        <div style={{backgroundColor: '#c7a8a2', minHeight: `${screenHeight}px`, background: `url(${bg2}) no-repeat 0 0`, backgroundSize: '100% auto'}} />
                        <div style={{backgroundColor: '#6a6b65', minHeight: `${screenHeight}px`, background: `url(${bg3}) no-repeat 0 0`, backgroundSize: '100% auto'}} />
                    </Carousel>
                </div>
                <div className="home-content">
                    <div className="content-more">
                        <p><span>电计学院政策</span>|<span>人才招聘</span></p>
                        <div>
                            <a href="#">管理员</a>|<a href="#">教职工</a>|<a href="#">校友</a>|<a href="#">考生和访客</a>
                            <Search
                                placeholder="input search text"
                                onSearch={value => console.log(value)}
                                style={{ width: 200 }}
                            />
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}
